import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import "./index.scss";
import { useEffect } from "react";

interface IVReactEchartsProps {
    getOptions: (params: any) => Promise<any>;
    style?: React.CSSProperties;
}
const VReactEcharts: React.FC<IVReactEchartsProps> = (props) => {
    const [options, setOptions] = useState({});
    useEffect(() => {
        props.getOptions({}).then(options => {
            setOptions(options);
        }).catch(err => {
            setOptions({})
        })
    }, [props.getOptions])
    return <div className="v-react-echarts" style={props.style}>
            <ReactEcharts 
            option={options}
        />
    </div>
}

export default VReactEcharts;